<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewpor" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- textarea -->
        <p>{{message}}</p>
        <textarea v-model="message"></textarea>
        <hr>

        <!-- checkbox -->
        <input type="checkbox" id="cb" v-model="checked">
        <label for="cb">{{checked}}</label>
        <hr>

        <!-- 复选框 -->
        <div>
            <input type="checkbox" id="ip1" value="jack" v-model="students">
            <label for="ip1">jack</label>
            
            <input type="checkbox" id="ip2" value="john" v-model="students">
            <label for="ip2">john</label>

            <input type="checkbox" id="ip3" value="mike" v-model="students">
            <label for="ip3">mike</label>
            <br>

            <span>students: {{students}}</span>
        </div>
        <hr>

        <!-- 单选按钮组 -->
        <div>
            <input type="radio" id="r1" value="one" v-model="picked">
            <label for="r1">one</label>

            <input type="radio" id="r2" value="two" v-model="picked">
            <label for="r2">two</label>

            <input type="radio" id="r3" value="three" v-model="picked">
            <label for="r3">three</label>
            <br>

            <span>picked: {{picked}}</span>
        </div>
        <hr>

        <!-- 下拉菜单 -->
        <div>
            <select v-model="selected">
                <option v-for="op in options" :value="op.value">{{op.text}}</option>
            </select>
            <span>selected: {{selected}}</span>
        </div>

    </div>

    <script>
        Vue.createApp({
            data(){
                return {
                    message:"今晚打老虎",
                    checked:false,
                    students:[ "jack"],
                    picked:'',
                    selected:'3',
                    options:[
                        {text:'one',value:"1"},
                        {text:'two',value:"2"},
                        {text:'three',value:"3"},
                    ]
                }
            }
        }).mount('#app')
    </script>
</body>

</html>